<template>
  <div class="radar-box">
    <div id="radarRipple"></div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, toRefs } from 'vue'
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
})
const { chartData } = toRefs(props)
let chartDom
let chart
const option = ref({
  color: ['#0285FF', '#094ba0', '#0d53b9', '#144079', '#1c5199'],
  //   title: {
  //     text: "Customized Radar Chart",
  //   },
  tooltip: {
    trigger: 'item',
  },
  radar: [
    {
      indicator: [],
      //   center: ["25%", "50%"],
      center: ['50%', '50%'], // 将雷达图向右移动
      //   radius: "70%",
      radius: 126,
      startAngle: 90,
      splitNumber: 5,
      shape: 'circle',
      // 设置轴名称的样式
      axisName: {
        color: '#fff',
        backgroundColor: {
          image:
            '',
          repeat: 'no-repeat',
        },
        padding: [2, 15],
        height: 32,
        width: 150,
        fontSize: 20,
      },
      splitArea: {
        areaStyle: {
          color: ['#0285FF', '#094ba0', '#0d53b9', '#144079', '#1c5199'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10,
        },
      },
      axisLine: {
        lineStyle: {
          //   color: "transparent",//或width: 0,隐藏点到中心点连线
          color: '#1e5aa2',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#0285FF', //设置每个区域边框色
        },
      },
    },
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 2,
        },
      },
      lineStyle: {
        color: '#1884f7', // 设置为红色
        width: 2, // 设置线条宽度
        type: 'solid', // 设置线条类型，可选'solid', 'dashed', 'dotted'
      },
      // 设置点的样式
      itemStyle: {
        color: '#306FFF',
        // 设置边框颜色和宽度
        borderColor: '#fff',
        borderWidth: 2,
        // 设置圆点大小
        areaStyle: {
          radius: 5,
        },
      },
      data: [],
      areaStyle: {
        opacity: 0.3, // 波纹的透明度
        waveAnimation: true, // 是否开启波动动画
        waveAmplitude: 10, // 波动的振幅
        waveCount: 3, // 波动的数量
        waveSpeed: 5, // 波动的速度
      },
    },
  ],
})
const initChart = (data) => {
  const { indicator, dataSeries } = data || {}
  option.value.radar[0].indicator = indicator
  option.value.series[0].data = dataSeries
  chartDom = document.getElementById('radarRipple')
  chart = echarts.init(chartDom)
  option.value && chart.setOption(option.value)
}
onMounted(() => {
  initChart(chartData.value)
})
defineExpose({
  initChart,
})
</script>

<style lang="scss" scoped>
.radar-box {
  width: 100%;
  height: 434px;
  position: relative;
  #radarRipple {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99; //位于波纹上层
    width: 100%;
    height: 434px;
  }
  // 围绕雷达图动画
  .circle1,
  .circle2,
  .circle3 {
    position: absolute;
    top: 77px;
    left: 327px;
    width: 30%;
    height: 60%;
    box-shadow: 0 0 rgb(31, 43, 87);
    // background: linear-gradient(180deg, rgba(15, 65, 155, 0.19) 0%, rgba(0, 71, 199, 0.1) 100%),
    //   radial-gradient(100% 93% at 138% 100%, rgba(65, 135, 255, 0.58) 0%, rgba(0, 127, 255, 0) 100%);
    // border-image: linear-gradient(
    //     180deg,
    //     rgba(18.053097277879715, 132.5774547457695, 255, 0.7900000214576721),
    //     rgba(166.9911441206932, 250.14057755470276, 255, 0.8899999856948853)
    //   )
    //   1 1;
    box-shadow: 0 0 5px #578adf; //设置波纹阴影
    border-radius: 50%;
  }
  .circle1,
  .circle2,
  .circle3 {
    animation: circleChange 3s linear infinite;
  }
  .circle1 {
    animation-delay: 1s;
  }
  .circle2 {
    animation-delay: 2s;
  }
  .circle3 {
    animation-delay: 3s;
  }

  @keyframes circleChange {
    0% {
      transform: scale(1);
      // opacity: 0.95;
    }
    // 25% {
    //   transform: scale(2);
    //   opacity: 0.75;
    // }
    // 50% {
    //   transform: scale(3);
    //   opacity: 0.5;
    // }
    // 75% {
    //   transform: scale(4);
    //   opacity: 0.25;
    // }
    100% {
      transform: scale(2);
      // opacity: 0.05;
    }
  }
}
</style>
